<!-- 普通搜索栏 搜索栏 -->
<!-- 参数
  searchcfg ： 配置选项的配置文件 格式如下
  searchcfg: [{
    key: 'cdfsSystemName', //真实的关键字
    type: 'input',   //组件类型
    label: '数据来源系统', //显示的名称
    placeholder: '数据来源系统',
	 labelspan: 2,  //标签的宽度
	 valuespan: 4, //显示区域的宽度
  },
  //下拉框
  {
    key: 'cdfsSystemName2',//真实的关键字
    type: 'select',  //组件类型
    label: '数据文件格式', //显示的名称
    placeholder: '数据文件格式',
    labelspan: 2,
    valuespan: 4,
	value_key:"KEY_",//选项数组中的key字段的名字 默认是KEY_ 可以不写
	lable_key:"LABLE_",  //选项数组中 显示名称的字段名 默认是LABLE_可以不写
    valuemap:[{KEY_:'aaa',LABLE_:'选项A'},{KEY_:'bbb',LABLE_:'选项B'}]
  },
  //日期选择
  {
    key: 'cdfsSystemName2',//真实的关键字
    type: 'date-picker',  //组件类型
	date_type:"daterange", //组件数据类型
    label: '数据文件格式', //显示的名称
    placeholder: '数据文件格式',
    labelspan: 2,
    valuespan: 4,
	value_key:"KEY_",//选项数组中的key字段的名字 默认是KEY_ 可以不写
	lable_key:"LABLE_",  //选项数组中 显示名称的字段名 默认是LABLE_可以不写
    valuemap:[{KEY_:'aaa',LABLE_:'选项A'},{KEY_:'bbb',LABLE_:'选项B'}]
  }
  {type:'space', //空白佔位用於對齊
  span:4}
  ]
  ,

  buttons: [{
    name: "新增",
    type: 'primary',
    event: 'create',
    eventData: {}
  }],
-->
<!-- 事件
  select data：{key：value}标准搜索json
 -->

<!-- 
  插槽
  operation 
  搜索按钮的插槽
  -->
<template>
	<div>
		<!-- 搜索框 -->
		<div v-if="searchcfg" class="searchDiv">
			<el-row :gutter="6" @keyup.enter.native="clickselect">
				<!-- 循环配置文件 生产对应的搜索 -->
				<template v-for="item in searchcfg">
					<!-- 空白区域 -->
					<template v-if="item.type=='space'">
						<el-col :span="item.span">
						</el-col>
					</template>
					<template v-else>
						<el-col :span="item.labelspan?item.labelspan:2">
							<div class="lable">
								{{item.label}}
							</div>
						</el-col>
						<el-col :span="item.valuespan?item.valuespan:6" class="value">
							<!-- 普通的输入框 -->
							<template v-if="item.type == 'input'">
								<el-input v-model="searchdata[item.key]" size="mini" :label="item.name"
									class="value_input" :placeholder="item.placeholder"></el-input>
							</template>
							<!-- 选择框 -->
							<template v-else-if="item.type == 'select'">
								<el-select v-model="searchdata[item.key]" size="mini" clearable class="value_select">
									<el-option v-for="it in item.valuemap" :key="it.KEY_" :value="it.KEY_"
										:label="it.VALUE_">
									</el-option>
								</el-select>
							</template>
							<!-- 日期 -->
							<template v-else-if="item.type == 'date-picker'">
								<el-date-picker v-model="searchdata[item.key]" type="datetimerange" align="right" style="width:100%"
									unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
								</el-date-picker>
							</template>
							<!-- 年月 -->
							<template v-else-if="item.type == 'monthrange'">
								<el-date-picker v-model="searchdata[item.key]" type="monthrange" align="right"
									unlink-panels range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份">
								</el-date-picker>
							</template>
						</el-col>
					</template>
				</template>
				<!-- 处理统一的按钮 以及自定义按钮 -->
				<el-col :span="buttonSapn" class="value">
					<div class="btndiv">
						<el-button v-blur plain size="mini" @click="clickselect($event)" class="query">查询
						</el-button>
						<el-button v-blur plain size="mini" @click="clickreset($event)" class="reset">重置
						</el-button>
						<!-- 按钮的插槽 -->
						<slot name="operation">
							<template v-for="item in buttons">
								<el-button v-blur class="button_class" :class="item.type?item.type:'added'" size="mini"
									:type="item.type?item.type:'success'" @click="throwevent($event,item)">
									{{item.name}}
								</el-button>
							</template>
						</slot>
					</div>
				</el-col>
			</el-row>
		</div>
		<!-- table -->
		<div class="tableDiv">
			<slot></slot>
		</div>
		<!-- 分页 -->
		<template v-if="pagination">
			<div class="pagediv">
				<!--分页条total, sizes, prev, pager, next, jumper-->
				<el-pagination background layout="total,sizes,prev, pager, next,jumper" :current-page="pageNum"
					:page-size="pageSize" :total="recordsFiltered" :page-sizes="pageSizeArr" @size-change="changeSize"
					@current-change="changepageNum"></el-pagination>
			</div>
		</template>
	</div>
</template>

<script>
	import '@/assets/queryPublic.css'
	import "@/assets/plugsclass.css"
	export default {
		name: "mainview",
		props: {
			// 有没有分页
			pagination: {
				type: Boolean,
				default: true,
			},
			// 搜索配置
			searchcfg: Array,
			//按钮配置
			buttons: Array,
			pageSizeArr: {
				type: Array,
				default: function() {
					return [5, 10, 20, 50];
				}
			},
			buttonSapn: {
				type: Number,
				default: 4,
			}
		},
		components: {},
		data() {
			return {
				pageNum: 0, //当前页面
				pageSize: 20, //每一页的数量
				recordsFiltered: 0, //总数
				//搜索内容
				searchdata: null, //搜索数据对象是个{ rptYearMth}
			};
		},
		created() {
			let data = {}
			for (var i = 0; i < this.searchcfg.length; i++) {
				let it = this.searchcfg[i]
				data[it.key] = ''
			}
			this.searchdata = data;
		},
		mounted() {
			//
			console.log("初始化")
			this.select()
		},
		methods: {
			
			// 当前页修改
			changepageNum(val) {
				this.pageNum = val
				this.select();
			},
			// 页码修改
			changeSize(val) {
				this.pageSize = val
				this.select();
			},
			//发出搜索事件
			select() {
				// 从配置的组件里面 获取真实的数据  组装成后端想要的请求
				let realdata = {}
				let searchdata = this.searchdata
				for (let key in searchdata) {
					if (searchdata[key] == null || searchdata[key] == "") {
						continue;
					}
					realdata[key] = searchdata[key];
				}
				this.$emit("select", {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					param: realdata
				})
			},
			setPage(p) {
				this.pageNum = p;
			},
			setTotal(total) {
				this.total = total;
			},
			//获取页码信息
			getPageData() {
				return {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					total: this.total,
				}
			},
			// 搜索相关
			// 点击搜索按钮
			clickselect(e) {
				 
				// console.log(this.searchdata)
				//点击搜索 应该是从第一页开始搜索
				this.pageNum = 1;
				this.select()
			},
			// 点击重置按钮
			clickreset(e) {
				 
				this.pageNum = 1;
				// 并且清空条件
				for (let key in this.searchdata) {
					this.searchdata[key] = ''
				}
				this.select()
			},
			throwevent(e, item) {
				 
				//自定按钮点击之后向父级发送事件
				// console.log(item)
				this.$emit(item.event, item.eventData)
			},
		}
	};
</script>

<style scoped="" lang='scss'>
	.tableDiv {
		background: #FFFFFF;
		border: 1px solid #B9DAF2;
		border-radius: 6px;
	}

	.searchDiv {
		position: relative;
		background: #F4F8FF;
		border: 1px solid #B9DAF2;
		border-radius: 8px;
		padding: 15px 22px 15px 22px;
		margin-bottom: 20px;
	}

	.lable {
		font-size: 14px;
		height: 40px;
		line-height: 40px;
		text-align: right;
	}

	.value {
		height: 40px;
	}

	.value_input {
		margin-top: 20px;
		transform: translateY(-50%);
	}

	.value_select {
		margin-top: 20px;
		transform: translateY(-50%);
	}

	.value_date_picker {
		margin-top: 20px;
		transform: translateY(-50%);
	}

	.button_class {
		border: 0;
		padding: 0 10px;
	}

	.query,
	.reset,
	.export,
	.del,
	.added {
		font-size: 14px;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		vertical-align: middle;
		line-height: 2px;
		min-width: 70px;
		height: 28px;
		background: linear-gradient(90deg, #3D80FF, #3DAFFF);
		border-radius: 5px;
		border: 0;
		padding: 0 10px;
	}

	.query:hover {
		color: #ADAFB1;
	}

	.del {
		background: linear-gradient(90deg, #FF5A5A, #FF7272);
	}

	.export {
		background: linear-gradient(90deg, #FFA800, #FFCB5C);
	}

	.reset {
		background: linear-gradient(90deg, #C7CBCC, #ADAFB1);
	}

	.added {
		background: linear-gradient(90deg, #0BC6AA, #13E8CC);
	}
</style>
